﻿<template>
    <!--// 汽车消费台账-->
    <div class="big_box">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>车辆管理</el-breadcrumb-item>
            <el-breadcrumb-item>车辆消费台账</el-breadcrumb-item>
        </el-breadcrumb>
        <el-divider></el-divider>
        <el-form class="demo-form-inline" :model="Sel" label-width="140px">
            <el-row :gutter="24" class="row-bg">
                <el-col :span="3">
                    <el-select v-model="Sel.CarId" filterable required placeholder="请选择哪辆汽车">
                        <el-option :value="0" label="请选择哪辆汽车">请选择哪辆汽车</el-option>
                        <el-option v-for="(v,k) in AllVehicle" :value="v.Id" :data-userid="v.Id" :label="v.CareName" v-text="v.CareName" />
                    </el-select>
                </el-col>

                <el-col :span="3">
                    <el-date-picker type="date"
                                    v-model="Sel.StartDate"
                                    value-format="yyyy-MM-dd"
                                    placeholder="开始日期">
                    </el-date-picker>
                </el-col>
                <el-col :span="3">
                    <el-date-picker type="date"
                                    v-model="Sel.EndDate"
                                    value-format="yyyy-MM-dd"
                                    placeholder="结束日期">
                    </el-date-picker>
                </el-col>
                <el-col :span="1">
                    <el-button icon="el-icon-search" @click="GettableDB()"></el-button>
                </el-col>
            </el-row>
        </el-form>

        <el-row style="padding-top: 10px">
            <el-col>
                <el-table :data="tableData"
                          style="width: 100%"
                                  show-summary
                              :summary-method="getiGasCardsDataSummaries"
                          ref="multipleTable"
                          border>
                    <el-table-column header-align="center" fixed type="index" label="序号" align="center" width="50" :index="_indexMethod"></el-table-column>

                    <el-table-column header-align="center" prop="Date" label="车辆品牌" align="center" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            {{AllTById(AllVehicle, scope.row.CarId, 'CareName')}}
                        </template>
                    </el-table-column>
                    <el-table-column header-align="center" prop="LicensePlate" label="汽车牌照" align="center" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            {{AllTById(AllVehicle, scope.row.CarId, 'LicensePlate')}}
                        </template>
                    </el-table-column>
                    <el-table-column header-align="center" prop="LicensePlate" label="车辆型号" align="center" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            {{LicensePlateFc(scope.row)}}
                        </template>
                    </el-table-column>
                    <el-table-column header-align="center" prop="InsurancePremium" label="保险费" :show-overflow-tooltip="true" align="center">
                    </el-table-column>
                    <el-table-column header-align="center" prop="MaintenanceFee" label="维修、保养费" :show-overflow-tooltip="true" align="center">
                    </el-table-column>

                    <el-table-column header-align="center" prop="RoadToll" label="过路费" :show-overflow-tooltip="true" align="center">
                    </el-table-column>
                    <el-table-column header-align="center" prop="AnnualInspectionFee" label="年检费" width="120" align="center">
                    </el-table-column>
                    <el-table-column header-align="center" prop="OilFee" label="油费" :show-overflow-tooltip="true" align="center">
                    </el-table-column>
                    <el-table-column header-align="center" prop="TotalKilometres" label="总公里数" :show-overflow-tooltip="true" align="center">
                    </el-table-column>
                    <el-table-column header-align="center" prop="SumPic" label="总计" :show-overflow-tooltip="true" align="center">
                        <template slot-scope="scope">
                            {{SumPrice(scope.row)}}
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col :span="24">
                <div class="block" style="float: right">
                    <el-pagination @size-change="GettableDB"
                                   @current-change="GettableDB"
                                   :current-page.sync="pagination.currentPage"
                                   :page-sizes="pagination.pagesizes"
                                   :page-size.sync="pagination.pagesize"
                                   layout="total, sizes, prev, pager, next, jumper"
                                   :total.sync="pagination.total">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>
    </div>




</template>

<script>
    import { Loading } from "element-ui";
    import * as publicjs from "/public/Scriput/Public"
    export default {
        name: "CarLedger",
        data() {
            return {
                AllVehicle: [],
                Sel: {
                    CarId: 0,
                    StartDate: '',
                    EndDate: '',
                },
                tableData: [],
                //分页数据绑定
                pagination: {
                    currentPage: 1,
                    pagesizes: [10, 20, 30, 40, 50],
                    pagesize: 10,
                    total: 0
                },

            }
        },
        created() {
            this.AllVehicle = publicjs.GetAllVehicle(this.$http);
            this.Initdate();
            this.GettableDB();
        },
        methods: {
            Initdate() {
                this.Sel.StartDate = this.GetInitdate(1);
                this.Sel.EndDate = this.GetInitdate(0);
            },
            GetInitdate(cout) {
                var date = new Date();
                var seperator1 = "-";
                var year = date.getFullYear();
                var month = date.getMonth() + cout;
                var strDate = date.getDate();
                if (month >= 1 && month <= 9) {
                    month = "0" + month;
                }
                if (strDate >= 0 && strDate <= 9) {
                    strDate = "0" + strDate;
                }
                var currentdate = year + seperator1 + month + seperator1 + strDate;
                return currentdate;
            },

            GettableDB() {
                const Loading = this.openLoading();
                this.$http.post('/VehicleManagement/GetCarLedgerDB', {
                    Sel: this.Sel,
                    offset: this.pagination.currentPage,
                    limit: this.pagination.pagesize
                }).then(res => {
                    console.log(res);
                    this.tableData = res.data.data;
                    this.pagination.total = res.data.count;
                    Loading.close();
                });
            },

            _indexMethod(index) {
                return ((this.pagination.currentPage - 1) * this.pagination.pagesize) + index + 1
            },

            //User表根据id找名称
            AllTById(AllUsers, d, name = null) {
                var result;
                AllUsers.forEach((v, k) => {
                    if (v["Id"] == d) {
                        if (name != null) {
                            result = v[name];
                        } else {
                            result = v;
                        }
                        return false;
                    }
                });
                return result;
            },


            fmtDate(obj) {
                return obj.split(' ')[0];
            },
            SumPrice(d) {
                var sumPicone = 0;
                sumPicone = this.dcmAdd(sumPicone, d.InsurancePremium);
                sumPicone = this.dcmAdd(sumPicone, d.MaintenanceFee);
                sumPicone = this.dcmAdd(sumPicone, d.RoadToll);
                sumPicone = this.dcmAdd(sumPicone, d.AnnualInspectionFee);
                sumPicone = this.dcmAdd(sumPicone, d.OilFee);
                d.sumPicone = sumPicone;
                return sumPicone;
            },
            dcmAdd(d, dd) {
                if (dd == null || dd == undefined || dd == "") {
                    dd = 0;
                }
                return d + dd;
            },

            toDecimal(x) {
                var f = parseFloat(x);
                if (isNaN(f)) {
                    return;
                }
                f = Math.round(x * 100) / 100;
                return f;
            },

            MaintenanceTypeFc(d) {
                var id = this.AllTById(this.AllUsers, d.UserId, "DepartmentId");//[0]
                var name = this.AllTById(this.AllDepartment, id, "DepartmentName");//[0]
                return name;
            },

            LicensePlateFc(d) {
                var licenseplatename = this.AllTById(this.AllVehicle, d.CarId, 'CarModel');
                if (licenseplatename == null) {
                    return "未知";
                }
                return licenseplatename;
            },


            //油卡信息合计计算
            getiGasCardsDataSummaries(param) {
                const { columns, data } = param;
                const sums = [];
                columns.forEach((column, index) => {
                    if (index === 0) {
                        sums[index] = '总计';
                        return;
                    } if (index = 4) {
                        var sum = 0;
                        data.forEach(item => {
                            sum += item.InsurancePremium
                        })
                        sums[index] = sum;
                    } if (index = 5) {
                        var sum = 0;
                        data.forEach(item => {
                            sum += item.MaintenanceFee
                        })
                        sums[index] = sum;
                    } if (index = 6) {
                        var sum = 0;
                        data.forEach(item => {
                            sum += item.RoadToll
                        })
                        sums[index] = sum;
                    } if (index = 7) {
                        var sum = 0;
                        data.forEach(item => {
                            sum += item.AnnualInspectionFee
                        })
                        sums[index] = sum;
                    }
                    if (index = 8) {
                        var sum = 0;
                        data.forEach(item => {
                            sum += item.OilFee
                        })
                        sums[index] = sum;
                    }
                    if (index = 9) {
                        var sum = 0;
                        data.forEach(item => {
                            sum += item.TotalKilometres
                        })
                        sums[index] = sum;
                    }
                    if (index = 10) {
                        var sum = 0;
                        data.forEach(item => {
                            sum += item.sumPicone
                        })
                        sums[index] = sum;
                    }
                });
                return sums;
            },
        },
    }
</script>

<style scoped>
</style>